<html>
<head>
	<title> Habit </title>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport", content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="/static/bootstrap-3.3.5-dist/css/bootstrap.min.css" >
	<link rel="stylesheet" type="text/css" href="/static/jquery-ui-1.11.4/smoothness/jquery-ui.min.css">
	<link rel="stylesheet" type="text/css" href="/static/habit-css/habit.css">
	<link rel="stylesheet" type="text/css" href="/static/glanceyear/glanceyear.css">


	<script src="/static/jquery-1.11.3/jquery.min.js"> </script>
	<script src="/static/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
	<script src="/static/jquery-ui-1.11.4/jquery-ui.min.js"></script>
	<script src="/static/hotkeys/jquery.hotkeys.js"></script>

	<script src="/static/glanceyear/jquery.glanceyear.js"></script>

	<script src="/static/habit-js/habit.js"></script>

</head>

<body >

<div style="display:none;" id="request_get_from"> {{request_get_from}} </div>
<div style="display:none;" id="excepts">{{excepts}}</div>
<div style="display:none;" id="habit_ids">
	{% for habit in habits %} {{habit.id}},{% endfor %}
</div>


<div class="main-container container" >

	<header class="habit-header container"> 
		<h1 class="logo">每日成长习惯</h1>
	</header>


	<div class="information container" >
		<input type="text" id="date" style="float: left; margin-left:-1.7%; border:none; "><div style="display:none" id="date_show">{{date}}</div>
		<span style="float: left; margin-left:-1.7%;" id="weekday" >{{weekday}}</span> 
		<span style="float: left; margin-left:50%;">累积成长</span>
		<span id="total_days" style="float:left; margin-left:5%; text-align:left;"> {{total_days}} </span>
		<span style="float: right; margin-right:-1.6%;">天</span>
	</div>





	{% for habit in habits %}
	<div class="record center">
		<div   class="title-bar container"> 
			{{habit.name}}
			<div class="title-checkbox">
				<input type="checkbox"  id="habit{{habit.id}}" value="0" aria-label="...">
			</div>
		</div>
		<div class="count" id="habit{{habit.id}}_value">{{habit.value}}</div>
		<div class="glanceyear container" id="glanceyear{{habit.id}}">
			<div class="glanceyear-content"  id="js-glanceyear{{habit.id}}"></div>
			<div class="count" id="recorded_dates{{habit.id}}">{{habit.recorded_dates}}</div>
		</div>
	</div>
	{% endfor %}




	<div class="record center" id="habit">
		<div   class="title-bar container"> 
			每日成长值
		</div>

		<div class="glanceyear container" id="glanceyear">
			<div class="glanceyear-content"  id="js-glanceyear"></div>
			<div class="count" id="recorded_dates">{{recorded_dates}}</div>
		</div>

		<div class="glanceyear-summary container">
			<div class="glanceyear-legend">
				Less&nbsp;
				<span style="background-color: #eee"></span>
				<span style="background-color: #D6E685"></span>
				<span style="background-color: #8CC665"></span>
				<span style="background-color: #44A340"></span>
				<span style="background-color: #1E6823"></span>
				<span style="background-color: #021E02"></span>
				&nbsp;More
			</div>
			Summary of All Habits <br>
			<span id="debug"></span>
		</div>
	</div>


	<div class="show-bar container" >
		<span>总</span>
		<div class="count" id="t_count">{{total_days}}</div> <div class="count" id="total_count">{{total_count}}</div>
		<svg height="40" width="40" id="t_svg">
			<circle id="t_svg_circle" cx="20" cy="20" r="20" fill="rgba(0,0,0,0.12)" />
			<path id="t_svg_path0" d="" fill=""></path>
			<path id="t_svg_path1" d="" fill=""></path>
		</svg>
		<span>年</span>
		<div class="count" id="y_count">{{y_count}}</div>
		<svg height="40" width="40" id="y_svg">
			<circle id="y_svg_circle" cx="20" cy="20" r="20" fill="rgba(0,0,0,0.12)" />
			<path id="y_svg_path0" d="" fill=""></path>
			<path id="y_svg_path1" d="" fill=""></path>
		</svg>

		<span>月</span>
		<div class="count" id="m_count">{{m_count}}</div>
		<svg height="40" width="40" id="m_svg">
			<circle id="m_svg_circle" cx="20" cy="20" r="20" fill="rgba(0,0,0,0.12)" />
			<path id="m_svg_path0" d="" fill=""></path>
			<path id="m_svg_path1" d="" fill=""></path>
		</svg>

		<span>周</span>
		<div class="count" id="w_count">{{w_count}}</div>
		<svg height="40" width="40" id="w_svg">
			<circle id="w_svg_circle" cx="20" cy="20" r="20" fill="rgba(0,0,0,0.12)" />
			<path id="w_svg_path0" d="" fill=""></path>
			<path id="w_svg_path1" d="" fill=""></path>
		</svg>

		<button type="button" class="btn btn-default" id="submit"><a href="javascript:void(0)">提交</a></button>
		<button type="button" class="btn btn-default" id="modify"><a href="javascript:void(0)">修改</a></button>

	</div>

	<hr>

	<div class="addremove">
		<input type="text" id="habit_addremove" value="请输入习惯的名称"  onfocus="if(value=='请输入习惯的名称'){value=''}"  onblur="if(value==''){value='请输入习惯的名称'}"/>  

		<button type="button" class="btn btn-default" id="remove"><a href="javascript:void(0)">删除习惯</a></button>

		<button type="button" class="btn btn-default" id="add"><a href="javascript:void(0)">添加新习惯</a></button>

	</div>



	<footer class="footer container" role="footer">
		<div class="copyright">
			©
			<a href="">冰蓝</a>
		</div>

		<ul class="fonter-nav">
			<li class="nav-item">
				<a href="">帮助中心</a>
			</li>
			<li class="nav-item">
				<a href="">服务条款</a>
			</li>
		</ul>

	</footer>

<!--/form-->
</div>



</body>
</html>
